<template>
	<view>
		<view class="fullPage p30">
			<view class="container plr24 pb30 bf border-r1">
				<view class="flex_sb h80 ft26 bdb">
					<text>充电柜编号：{{ info.deviceNo }}</text>
					<!-- <text>{{ info.operatorName }}</text> -->
				</view>
				<view class="flex_sb h80">
					<text>{{ info.siteName }}</text>
					<!-- <text class="c9 ft26">{{ info.distance || '--' }}km</text> -->
				</view>
				<view class="flex mb10">
					<view class="flex_a w40 h40 whn">
						<image src="/static/ic_dw_2x.png" mode="widthFix" style="width: 22upx;height: 24upx;"></image>
					</view>
					<text class="c9">{{ info.address }}</text>
				</view>
				<view class="flex_sb h100 mb30 plr30 bgf5">
					<view class="flex_a">
						空闲仓位：
						<view class="green">{{ info.blankNum }}</view>
					</view>
					<view class="flex_a">
						总仓位：
						<view class="ft30">{{ info.chanelNum }}</view>
					</view>
				</view>
				<view class="flex_a h100 mb30 plr30 bgf5">
					<!-- 充电套餐类型 1 :按时间收费 2：按功率收费  {{ info.chrMealPrice }} -->
					收费标准：{{ info.chrMealType == 2 ? '每度电量' : '每小时' }}
					<view class="pl10 danger"> {{ info.chrMealPrice || 0}} 元</view>
				</view>
				<view class="flex_a h70 mb30 plr24 bd border-r1">
					<text class="pr40">仓门状态：</text>
					<view class="flex1 flex_sb">
						<view class="flex_a">
							<view class="minSquare bd-warning"></view>
							<text>有电仓</text>
						</view>
						<view class="flex_a">
							<view class="minSquare bd-green"></view>
							<text>空仓位</text>
						</view>
						<view class="flex_a">
							<view class="minSquare bd-danger"></view>
							<text>故障仓位</text>
						</view>
					</view>
				</view>

				<view class="btBox_w mb40 plr10 ft22">
					<view class="btBox_item" v-for="(item, boxIndex) in list" :key="boxIndex">
						<view class="flex_aj column w130 h130 mb20 mlr10 plr10 ptb10 "
							:class="item.status == 0 ? 'bd-green' : item.status == 1 || item.status == 2 ? 'bd-warning' : 'bd-danger'"
							@click="maintOpenDoor(item)">
							<view>仓门号{{ item.cabinetNo }}</view>
							<view class="pw100 tac" style="word-wrap:break-word" v-if="item.goods_no">
								{{ item.goods_no }}
							</view>
							<!-- 充电柜的状态 -->
							<view class="">
								{{ item.status == 0 ? '空仓位' : item.status == 1 ? '充电中' : item.status == 2 ? '已满' : item.status == 5 ? '故障' : '--' }}
							</view>
						</view>
					</view>
				</view>


				<!-- 刷新 -->
				<view class="flex jce plr50 mb30">
					<view class="refresh_w flex_aj" @click="getInfo">
						<u-icon name="reload" color="#fff" size="40"></u-icon>
					</view>
				</view>

				<!-- <view class="plr30 mb50">
					<u-button type="primary" shape="circle" throttle-time="2000" @click="opendoor">开启仓门</u-button>
				</view> -->
				<view class="plr24 ptb24 bd">
					<view class="h50">使用须知</view>
					<view class="c6">
						<u-parse :html="info.instructions"></u-parse>
					</view>
				</view>
			</view>
		</view>

		<!-- 新人红包弹窗 start -->
		<u-mask :show="isShowRedBag">
			<view class="flex_aj pw100 ph100">
				<view class="cp_w">
					<view class="cp_img">
						<image src="/static/redBag_img.png" mode="widthFix" style="width: 654upx;height: 876upx;">
						</image>
					</view>
					<view class="cp_c cf">
						<view class="mb70 tac">
							<view class="cp_money mb30 tac">
								<text class="ft80">{{redBag.giveMoney}}</text>
								<text class="ft36">元</text>
							</view>

							<view class="mb150 ft32">新用户专享红包</view>
							<view class="flex_aj">
								<text @click="goWallet">“我的钱包”</text>
								中查看
							</view>
						</view>

						<view class="flex_aj">
							<view class="close_btn flex_aj border-r50p" @click="closeRedBag">
								<u-icon name="close" color="#fff" size="32"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-mask>
		<!-- 新人红包弹窗 end -->

	</view>
</template>

<script>
	import {
		scanDevice,
		getInfoByAppId,
		getListByDeviceId,
	} from '@/api/user.js'
	import {
		getGiveInfo
	} from '@/api/public.js'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				deviceNo: '',
				query: {},
				info: {},
				getInfoByAppIdObj: {},
				xinxi: [],
				xinxiss: [],
				list: [],
				isShowRedBag: false, // 是否显示新人红包
				redBag: {},
				list2: []
			}
		},
		onLoad(e) {
			// let qrCode = getApp().globalData.qrCode;
			let qrCode = uni.getStorageSync('url')
			let obj = {}
			if (e.deviceNo) {
				console.log('首页进来', e);
				obj = e
			} else if (qrCode) {
				// obj = this.getUrlParam(qrCode)
				let device = qrCode.split("?")[1].split("&")[0].split("=")[1] || ''
				obj.deviceNo = device
				console.log('微信扫码进来', device, obj);
			}
			if (obj.deviceNo) {
				this.query = obj
				this.deviceNo = obj.deviceNo
			}
			this.getInfoByAppId()
			this.getGiveInfo()
		},
		async onShow() {
			await this.scanDevice()
			let qrCode = uni.getStorageSync('url')
			if (qrCode) { //微信扫码进来就再次更新
				console.log('我在', qrCode);
				let obj = {}
				let device = qrCode.split("?")[1].split("&")[0].split("=")[1] || ''
				obj.deviceNo = device
				if (obj.deviceNo) {
					this.query = obj
					this.deviceNo = obj.deviceNo
				}
				this.getInfoByAppId()
				this.getGiveInfo()
			}

			console.log(this.tabbarstatus)
		},
		computed: {
			...mapState({
				tabbarstatus: state => state.tabbar.tabbarstatus,
				deviceTypes: state => state.tabbar.deviceTypes
			})
		},
		methods: {
			// 获取新人红包
			async getGiveInfo() {
				const res = await getGiveInfo({
					deviceNo: this.deviceNo
				})
				if (res.code === 200 && res.msg != "FAIL") {
					this.isShowRedBag = true
					this.redBag = res.data
				}
			},
			// 关闭红包弹窗
			closeRedBag() {
				this.isShowRedBag = false
			},
			// 跳转 我的钱包
			goWallet() {
				uni.redirectTo({
					url: '/pages/user/wallet/index'
				})
			},

			async maintOpenDoor(item) {
				if (item.status !== 0) {
					this.toast('请选择其他仓门')
					return
				}
				const result = await this.confirm({
					content: '确定打开' + item.cabinetNo + '仓门吗'
				})

				if (result.confirm) {
					this.opendoor(item.cabinetNo)
				}
			},
			// 刷新
			async getInfo() {
				let res = await getListByDeviceId({
					deviceId: this.info.deviceId
				})
				if (res.code !== 200) return
				this.list = res.data

			},
			// 消息订阅接口
			async getInfoByAppId() {
				this.xinxi = []
				this.xinxiss = []
				const res = await getInfoByAppId({
					appId: uni.getAccountInfoSync().miniProgram.appId
				})
				this.getInfoByAppIdObj = res.data
				// 获取value值 Object.values(this.getInfoByAppIdObj)
				// 便利value值成数组 this.xinxi

				let arrqq = Object.values(this.getInfoByAppIdObj)
				this.xinxi.push(arrqq[0])
				this.xinxi.push(arrqq[1])
				this.xinxi.push(arrqq[2])
				// this.xinxiss.push(arrqq[2])
				// this.xinxiss.push(arrqq[3])
				// this.xinxi.push(arrqq[4])
				// if (arrqq[5]) {
				// 	this.xinxiss.push(arrqq[5])
				// }
				console.log(222222222222, this.xinxi);
			},

			getUrlParam(url) {
				let params = url.split("?")[1].split("&");
				let obj = {};
				params.map(v => (obj[v.split("=")[0]] = v.split("=")[1]));
				console.log('555',
					obj);
				return obj
			},
			// 获取设备信息
			async scanDevice() {
				const res = await scanDevice(this.query)
				if (res.code === 200) {
					uni.setStorageSync('query', this.query)
					uni.setStorageSync('agentId', res.data.agentId)
					uni.setStorageSync('deviceId', res.data.deviceId)
				}
				if (res.code != 200) {
					return this.confirm({
						content: res.msg || '操作失败',
						showCancel: false
					}).then(res => {
						this.back()
					})
				}
				this.info = res.data

				await this.getInfo()
				// 是否有充电订单
				if (res.data.isChrOrder == 1) {
					this.confirm({
						content: '检测到您已有电池在此设备中',
						confirmText: '结束订单',
						cancelText: '返回首页'
					}).then(result => {
						if (result.confirm) {
							this.routerLink({
								path: '/pages/user/myOrder/chargeDetail',
								query: {
									orderNo: res.data.orderNo
								}
							})
						} else {
							this.back()
						}
					})
					// 2 待支付订单
				} else if (res.data.isChrOrder == 2) {
					this.confirm({
						content: '检测到您有待支付订单，请先完成该订单',
						cancelText: '取消',
						confirmText: '去支付'
					}).then(result => {
						if (result.confirm) {
							this.routerLink({
								path: '/pages/user/myOrder/chargeDetail',
								query: {
									orderNo: res.data.orderNo
								}
							})
						} else {
							this.back()
						}
					})
				}
			},
			// 开启仓门
			async opendoor(cabinetNo) {
				await this.subscribeMessage() // 订阅消息模板
				this.routerLink({
					path: '/pages/user/chargeEle/chargeProcess',
					query: {
						deviceId: this.info.deviceId,
						cabinetNo: cabinetNo
					}
				})
			},
			// 订阅消息模板
			async subscribeMessage() {
				console.log(this.xinxi)
				return new Promise((resolve, reject) => {
					uni.requestSubscribeMessage({
						tmplIds: this.xinxi,
						success: res => {
							console.log('消息订阅成功哦', res);
							resolve(res)
						},
						fail: err => {
							resolve(err)
							console.log('消息订阅失败哦', err)
						}
					})

				})
			},
			navigation() {
				uni.openLocation({
					latitude: this.info.batteryReturnVo.lat * 1,
					longitude: this.info.batteryReturnVo.lng * 1,
					name: this.info.batteryReturnVo.siteName,
					address: this.info.batteryReturnVo.deviceAddress,
					success: () => {}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	$minsize: 26upx;
	$green: #07c160;
	$warning: #ffad00;
	$danger: #ff6600;

	.btBox_w {
		// width: 100%;
		// overflow-x: auto;
		// white-space: nowrap;
		// text-align: center;
		margin-left: 20rpx;

		.btBox_item {
			display: inline-block;
			vertical-align: middle;
		}
	}

	.minSquare {
		width: $minsize;
		height: $minsize;
		margin-right: 14upx;
	}

	.bd-green {
		border: 1px solid $green;
		color: $green;
	}

	.bd-warning {
		border: 1px solid $warning;
		color: $warning;
	}

	.bd-danger {
		border: 1px solid $danger;
		color: $danger;
	}

	.icon_bat {
		position: relative;
		width: 30upx;
		height: 16upx;
		padding: 2upx;
		border: 1px solid $green;

		&::after {
			position: absolute;
			right: -4upx;
			top: 50%;
			transform: translateY(-50%);
			content: '';
			width: 4upx;
			height: 10upx;
			background-color: $green;
		}

		.bat_c {
			height: 8upx;
			background-color: $green;
		}
	}

	.bat_warn {
		border: 1px solid $warning;

		&::after {
			background-color: $warning;
		}

		.bat_c {
			background-color: $warning;
		}
	}

	.bat_danger {
		border: 1px solid $danger;

		&::after {
			background-color: $danger;
		}

		.bat_c {
			background-color: $danger;
		}
	}

	.refresh_w {
		width: 80upx;
		height: 80upx;
		background: linear-gradient(0deg, #3282ff, #90bafc);
		box-shadow: 0upx 0upx 20upx 0upx rgba(50, 130, 255, 0.5);
		border-radius: 50%;
	}

	.cp_w {
		position: relative;
		width: 654upx;
		height: 876upx;

		.cp_img {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 0;
		}

		.cp_c {
			position: relative;
			z-index: 1;
			padding-top: 370upx;

			.cp_money {

				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #ffffff;
				// line-height: 206px;
				// text-shadow: 0px 4px 0px rgba(167, 7, 46, 0.45);
				background: linear-gradient(180deg, #fffdc9 0%, #ffdb6d 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
	}
</style>